<template>
  <el-dialog
    :visible.sync="visible"
    title="审核"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="70%"
    top="70px"
  >
    <div class="dialogInner">
      <el-form
        :model="check"
        :rules="dataRule"
        ref="check"
        :label-width="$i18n.locale === 'en-US' ? '140px' : '140px'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称：" prop="">
              {{ dataForm.operateProject || "--" }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商户名称：" prop="">
              {{ dataForm.name || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业法人：" prop="">
              {{
                !tempLegalPerson
                  ? jiami(dataForm.legalPerson)
                  : $CryptoJS.decrypt(dataForm.legalPerson)
              }}
              <i class="el-icon-view" @click="show('tempLegalPerson')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域：" prop="">
              {{ dataForm.islandName || "" }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
                    <el-form-item label="实际经营人类型：" prop="">
                        {{$getDictLabel('hotel_operator_type',dataForm.operatorType)||'--'}}
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="实际经营人姓名：" prop="">
                        {{dataForm.operatorName||'--'}}
                    </el-form-item>
                </el-col> -->
          <!-- <el-col :span="8">
                    <el-form-item label="经营人单位名称：" prop="">
                        {{dataForm.operatorUnit||'--'}}
                    </el-form-item>
                </el-col> -->
          <el-col :span="12">
            <el-form-item label="统一社会信用代码：" prop="">
              {{ dataForm.creditCode || "--" }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
                    <el-form-item label="经营人证件类型：" prop="">
                        {{$getDictLabel('hotel_operator_card_type',dataForm.operatorType)||'--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="派出所代码：" prop="">
                        {{dataForm.policeCode||'--'}}
                    </el-form-item>
                </el-col> -->
          <!-- <el-col :span="6">
                    <el-form-item label="产权人类型：" prop="">
                        {{$getDictLabel('hotel_owner_type',dataForm.operatorType)||'--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="经营人证件号：" prop="">
                        {{dataForm.operatorCard||'--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="注册登记号：" prop="">
                        {{dataForm.registerNo||'--'}}
                    </el-form-item>
                </el-col> -->
          <!-- <el-col :span="8">
                    <el-form-item label="酒店类别" prop="">
                        {{$getDictLabel('HotelCategory',dataForm.category)}}
                    </el-form-item>
                </el-col> -->
          <!-- <el-col :span="6">
                    <el-form-item label="经营项目：" prop="">
                        {{dataForm.operateProject||'--'}}
                    </el-form-item>
                </el-col> -->

          <!-- <el-col :span="8">
                    <el-form-item label="经营时间：" prop="">
                        {{dataForm.operateTime||'--'}}
                    </el-form-item>
                </el-col> -->
          <el-col :span="12">
            <el-form-item label="法人身份证号" prop="">
              {{
                !tempIdCard
                  ? jiami(dataForm.operatorCard)
                  : $CryptoJS.decrypt(dataForm.operatorCard)
              }}
              <i class="el-icon-view" @click="show('tempIdCard')"></i>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="地址：" prop="">
              {{ dataForm.provinceName || "" }}{{ dataForm.cityName || "" }}
              {{ dataForm.areaName || "" }}
              {{ dataForm.street || "" }}
              {{ dataForm.areaDetail || "" }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
                    <el-form-item label="是否自动退房：" prop="">
                        {{dataForm.isCheckOut==1?'是':'否'||'--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否需要身份证：" prop="">
                        {{dataForm.isNeedCard==1?'是':'否'||'--'}}
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="是否需要结算：" prop="">
                        {{dataForm.isSettlement==1?'是':'否'||'--'}}
                    </el-form-item>
                </el-col>

                <el-col :span="6"  v-if="dataForm.isCheckOut==1">
                    <el-form-item label="自动退房时间：" prop="">
                        {{dataForm.checkOutTime||'--'}}
                    </el-form-item>
                </el-col> -->
          <h3>联系人信息</h3>
          <el-col :span="6">
            <el-form-item label="联系人姓名：" prop="">
              {{
                !tempLinkName
                  ? jiami(dataForm.linkName)
                  : $CryptoJS.decrypt(dataForm.linkName)
              }}
              <i class="el-icon-view" @click="show('tempLinkName')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人号码：" prop="">
              {{
                !tempPhone
                  ? jiami(dataForm.linkPhone)
                  : $CryptoJS.decrypt(dataForm.linkPhone)
              }}
              <i class="el-icon-view" @click="show('tempPhone')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="管理员用户名：" prop="">
              {{ dataForm.adminName || "--" }}
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="管理员密码：" prop="">
              加密不可见
              <!-- {{$CryptoJS.decrypt(dataForm.adminPassword)}} -->
            </el-form-item>
          </el-col>
          <h3>资料/照片</h3>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="">
              <el-image
                v-if="dataForm.img0"
                class="avatar"
                :src="dataForm.img0"
                :preview-src-list="[dataForm.img0]"
              >
              </el-image>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="法人身份证(国徽面)："
              prop=""
              label-width="160px"
            >
              <el-image
                v-if="dataForm.img1"
                class="avatar"
                :src="dataForm.img1"
                :preview-src-list="[dataForm.img1]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证(人像面)："
              prop=""
              label-width="160px"
            >
              <el-image
                v-if="dataForm.img2"
                class="avatar"
                :src="dataForm.img2"
                :preview-src-list="[dataForm.img2]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺门头/公司照片" prop="">
              <el-image
                v-if="dataForm.img3"
                class="avatar"
                :src="dataForm.img3"
                :preview-src-list="[dataForm.img3]"
              >
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他相关证件" prop="">
              <el-image
                v-if="dataForm.img4"
                class="avatar"
                :src="dataForm.img4"
                :preview-src-list="[dataForm.img4]"
              >
              </el-image>
            </el-form-item>
          </el-col>

          <h3>审核意见</h3>
          <el-col :span="24">
            <el-form-item label="审核结果" label-width="120px" prop="result">
              <el-select
                v-model="check.result"
                placeholder="请选择审核结果"
                clearable
              >
                <el-option label="通过" value="1"></el-option>
                <el-option label="不通过" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="审核反馈"
              label-width="120px"
              prop="checkFeedback"
            >
              <el-input
                v-model="check.checkFeedback"
                type="textarea"
                rows="2"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template slot="footer">
      <el-button type="primary" @click="checkData(dataForm.id)">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
import debounce from "lodash/debounce";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      visible: false,
      flag:false,
      dataForm: {
        id: "",
        picList: [],
        img0: "",
        img1: "",
        img2: "",
        img3: "",
      },
      tempLegalPerson: "",
      tempIdCard: "",
      tempLinkName: "",
      tempPhone: "",
      check: {
        checkFeedback: "",
        result: "",
        id: "",
      },
    };
  },
  computed: {
    dataRule() {
      return {
        result: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  filters: {},
  methods: {
    confirmCheck() {
      if (!this.flag) {
        this.flag = true;
      } else {
        return;
      } 
      console.log(1111)
      this.$http
        .post("/hotel/check/audit", {
          hotelHomestayId: this.check.id,
          checkFeedback: this.check.checkFeedback,
          result: this.check.result,
        })
        .then((res) => {
          if (res.data.code != 0) {
             this.flag = false;
            return this.$message.error(res.data.msg);
          }
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            },
          });
        });
    },
    init() {
      this.visible = true;
      this.provincAreaDetailInfoList();
      this.check = {
        checkFeedback: "",
        result: "",
        id: "",
      };
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    jiami(val) {
      return this.tmRules(this.$CryptoJS.decrypt(val), 1);
    },
    show(name) {
      this[name] = !this[name];
    },
    //脱敏规则
    tmRules(value, type) {
      let res = "";
      if (type == 1) {
        let arr = Array.from(value);
        if (arr.length === 2) {
          res = arr[0] + "*";
        } else if (arr.length > 2) {
          for (let i = 1; i < arr.length - 1; i++) {
            arr[i] = "*";
          }
          res = arr.join("");
        } else {
          res = value;
        }
      } else if (type == 2) {
        res = value.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
      } else if (type == 3) {
        res = value.replace(/^(.{4})(?:\d+)(.{4})$/, "$1**********$2");
      }

      return res;
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/hotel/homestay/checkInfo/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          // this.tempLegalPerson = this.tmRules(
          //   this.$CryptoJS.decrypt(this.dataForm.legalPerson),
          //   1
          // );
          // this.tempIdCard = this.tmRules(
          //   this.$CryptoJS.decrypt(this.dataForm.operatorCard),
          //   3
          // );
          // this.tempLinkName = this.tmRules(
          //   this.$CryptoJS.decrypt(this.dataForm.linkName),
          //   1
          // );
          // this.tempPhone = this.tmRules(
          //   this.$CryptoJS.decrypt(this.dataForm.linkPhone),
          //   2
          // );
          this.dataForm.picList = this.dataForm.picList
            ? this.dataForm.picList
            : [];
          if (this.dataForm.picList) {
            for (let i = 0; i < this.dataForm.picList.length; i++) {
              if (this.dataForm.picList[i].type == 4) {
                this.dataForm.img0 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 1) {
                this.dataForm.img1 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 2) {
                this.dataForm.img2 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 5) {
                this.dataForm.img3 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 0) {
                this.dataForm.img4 = this.dataForm.picList[i].pic;
              }
            }
          }

          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
        })
        .catch(() => {});
    },
    // 表单提交
    checkData: debounce(
      function () {
        this.$refs["check"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.check.id = this.dataForm.id;
          this.confirmCheck();
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss">
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
  }

  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
}

h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 16px;
  overflow: hidden;
}
</style>
